<template>
    <div class="main p-4">
        <el-form :model="formData" inline>
            <el-form-item label="类别" prop="categoryId">
                <el-select v-model="formData.categoryId" placeholder="请选择类别">
                    <el-option 
                    v-for="item in categoryList" 
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id" 
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="难度" prop="difficulty">
                <el-input v-model="formData.difficulty" placeholder="输入数字"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="paperStatus">
                <el-select v-model="formData.paperStatus" placeholder="请选择是否上架">
                    <el-option 
                    v-for="item in paperStatusList" 
                    :key="item.id"
                    :label="item.label"
                    :value="item.id" 
                    />
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button @click="query">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
        :data="paperList"
        >
            <el-table-column label="名称" prop="name" />
            <el-table-column label="满分" prop="fullScore" />
            <el-table-column label="难度" prop="difficulty" />
            <el-table-column label="类型">
                <template #default="{row}">
                    {{ row.paperType in paperTypeMap ? paperTypeMap[row.paperType].label : '' }}
                </template>
            </el-table-column>
            <!-- <el-table-column label="是否已删除" prop="isDelete">
                <template #default="{row}">
                    <span v-if="row.isDelete == 1">是</span>
                    <span v-else-if="row.isDelete == 0">否</span>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" align="center">
                <template #default="{row}">
                    <el-button @click="editPaper(row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="viewPaper(row)" size="small">查看</el-button>
                    <!-- <el-button @click="onlinePaper(row)" v-if="row.paperStatus == 0 || row.paperStatus == 2" size="small">上架</el-button> -->
                    <el-button @click="offlinePaper(row)" v-if="row.paperStatus == 1" size="small">下架</el-button>
                    <el-button @click="del(row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="center mt-6">
            <el-pagination
            v-model:current-page="pageConfig.current"
            v-model:page-size="pageConfig.limit"
            :page-sizes="pageConfig.sizes"
            :small="false"
            :layout="pageConfig.layout"
            :total="pageConfig.total"
            :hide-on-single-page="true"
            @size-change="getTableData"
            @current-change="getTableData"
            @next-change="getTableData"
            @prev-change="getTableData"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import request from '@/Utils/request';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { paperTypeMap } from '@/Utils/Data';

const paperList = ref<any[]>([]);

const categoryList = ref<any[]>([]);

const router = useRouter();

// 分页配置
let pageConfig = reactive({
    limit: 20,
    sizes: [10, 20, 30, 40, 50],
    current: 1,
    total: 0,
    layout: 'sizes, prev, pager, next, total, jumper'
});

const formData = reactive({
    categoryId: '',
    content: '',
    difficulty: '',
    paperStatus: '', // 0未上架,1上架,2已下架
});

/**
 * 重置
 */
 const reset = () => {
    formData.categoryId = "";
    formData.content = "";
    formData.difficulty =  "";
    formData.paperStatus=  ""; 
}
const paperStatusList = ref([
    {
        id: 0,
        label: '未上架'
    },
    {
        id: 1,
        label: '上架'
    },
    {
        id: 2,
        label: '已下架'
    }
]);

// 点击编辑事件
const editPaper = (row: any) => {
    // console.log('row.id: ', row.id);
    router.push({
        path: '/savePaper',
        name: 'SavePaper',
        params: {
            id: row.id
        }
    });
};

// 点击预览试卷
const viewPaper = (row: any) => {
    router.push({
        path: '/paperView',
        name: 'PaperView',
        params: {
            id: row.id
        }
    });
};

// 点击上架试卷
const onlinePaper = async (row: any) => {
    try {
        await ElMessageBox.confirm(
            '确认上架试卷？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        await request({
            url: '/paper/online',
            method: 'post',
            contentTypeIsForm: true,
            data: {
                id: row.id
            }
        });
        ElMessage({
            message: '上架成功',
            type: 'success'
        });
        row.paperStatus = 1;
    } catch (error) {
        console.warn('error: ', error);
    }
};

const del = async (row: any) => {
    try {
        await ElMessageBox.confirm(
            '确认删除试卷吗？',
            '提示',
            {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        await request({
            url: '/paper/delete',
            method: 'post',
            contentTypeIsForm: true,
            showLoading: {},
            errorToast: true,
            data: {
                id: row.id
            }
        });
        ElMessage({
            message: '删除成功',
            type: 'success'
        });
        getTableData();
    } catch (error) {
        console.warn('error: ', error);
    }
};

// 点击下架试卷
const offlinePaper = async (row: any) => {
    try {
        await ElMessageBox.confirm(
            '确认下架试卷？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        await request({
            url: '/paper/offline',
            method: 'post',
            contentTypeIsForm: true,
            data: {
                id: row.id
            }
        });
        ElMessage({
            message: '下架成功',
            type: 'success'
        });
        row.paperStatus = 2;
    } catch (error) {
        console.warn('error: ', error);
    }
};

const getCategoryList = async () => {
    try {
        categoryList.value = await request({
            method: 'post',
            url: '/paper/category/list'
        });
    } catch (error) {
        
    }
};

// 点击查询
const query = () => {
    pageConfig.current = 1;
    pageConfig.total = 0;
    getTableData();
};

// 获取列表
const getTableData = async () => {
    try {
        const { records, total } = await request({
            method: 'post',
            url: '/paper/list',
            data: {
                ...formData,
                limit: pageConfig.limit,
                page: pageConfig.current
            },
            contentTypeIsForm: false
        });
        paperList.value = records || [];
        // pageConfig.sizes = size;
        pageConfig.total = total;
    } catch (error) {
        
    }
};

const onShow = () => {
    console.log('onShow')
    getCategoryList();
    getTableData();
};

onMounted(onShow);
</script>